<template>
	<div class="search_ma">
		<header class="top_bar">
			<a onclick="window.history.go(-1)" class="icon_back" style="z-index: 1000;"></a>
			<form class="goods_search position_rel" v-on:submit.prevent>
				<input style="padding-left: 26px;" type="search" class="goods_search_content" placeholder="搜索" v-model="keyword">
				<img @click="goSearch()"  class="search_btn_icon" src="../assets/images/search_icon.png" />
			</form>
			<a href="javascript:void(0)" class="icon_menu"></a>
		</header>
		<section class="search_condition" style="display: none;">
			<ul>
				<li>
					<span class="all">全部</span>
					<em class="all_icon"></em>
				</li>
				<!--<li>
					<span @click="getbyHot()">销量</span>
				</li>-->
				<!--<li  @click="getByPriceUp()" class="p_price">
					<span>价格</span>
					<em class="price_up"></em>
					<em class="price_down"></em>
				</li>-->
				<!--<li>
					<span>筛选</span>
					<em class="saixuan"></em>
				</li>-->
			</ul>
		</section>
		<main class="main_goods_box" style="margin-top: 45px;">
			<ul v-if="productsList.length>0">
				<li class="goods_item" v-for="item in productsList">
					<router-link :to="'/wx/detail/'+item.Id" class="goods_item_link">
						<img v-lazy="root + item.ImgPath" alt="" class="goods_item_pic">
						<div class="goods_right">
							<div class="pp_name">
								<span>
	                                {{item.ProductName}}
	                            </span>
							</div>
							<div class="price_box">
								<span>￥</span>
								<span>{{item.MarketPrice}}</span>
								<span></span>
							</div>
							<div class="pinglun_box">
								<span>{{item.One+item.Tow+item.Three+item.Four+item.Five}}条评价</span>
							</div>
						</div>
					</router-link>
				</li>
			</ul>
			<div v-else class="" style="padding-top: 100px;text-align: center;">
				<img style="margin-bottom: 20px;" src="../assets/images/zanwushangpin.png"/>
				<h4>暂无该搜索条件的商品！</h4>
			</div>
		</main>
	</div>
</template>
<script>
	export default {
		created() {
			let _this = this
			_this.keyword = _this.$route.query.searchVal;
			console.log('_this.keyword', _this.keyword)
			if(_this.keyword === undefined) {
				_this.keyword = ''
			}
		},
		data() {
			return {
				root: this.root,
				keyword: '',
				productsList: [],
			}
		},
		mounted() {
			let _this = this
			_this.goSearch()
		},
		methods: {
			goSearch() {
				let _this = this;
				_this.$http.get('/client/Products?OnSale=1', {
					ProductName: _this.keyword
				}, localStorage.Authorization, res => {
					console.log('商品搜索res', res)
					if(res.code === 200) {
						_this.productsList = res.data.list
						console.log('_this.productsList.length', _this.productsList.length)
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			},
			goSearch2(e) {
				var _this = this
				var keycode = e.keyCode;
				 if (keycode == '13') {
				 	_this.goSearch()
				 }
			},
			getbyHot() {
				let _this = this;

			},
			getByPriceUp() {
				let _this = this;

			},
			getByPriceDown() {
				let _this = this;

			}
		}
	}
</script>
<style scoped>
	@import '../assets/css/searchpage.css'
</style>
<style type="text/css">
	.search_btn_icon {
		position: absolute;
		top: 13px;
		left: 47px;
	}
</style>